<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>消息主页</title>
    <link rel="stylesheet" href="../plugs/kindeditor/plug/modal/modal.min.css">
    <link rel="stylesheet" href="../assets/icomoon/style.css">
    <link rel="stylesheet" href="../plugs/kindeditor/editor/style.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/group.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="g-wrap">
        <div class="g-wrap-inner">
            <!-- 左侧用户列表 -->
            <div class="panel">
                <div class="m-sch">
                    <i class="icon-jslt-13" onclick="findUnread()"></i>
                    <input type="text" placeholder="搜索联系人" class="sch-ipt">
                </div>
                <div class="m-tab">
                    <a href="javascript:;" class="active" onclick="showRelated(this)">最近联系人</a>
                    <a href="javascript:;" onclick="showGroup(this)">好友列表</a>
                </div>
                <!-- 最近联系人 -->
                <div class="m-contact-list" id="dropView">
                    <div class="u-item">
                        <div class="avatar">
                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                            <div class="unread">12</div>
                        </div>
                        <div class="info">
                            <p>
                                <span class="nickname ellipsis">张三</span>
                                <span class="time">10:45</span>
                            </p>
                            <p class="ellipsis">
                                <span>输了你赢了世界又如何</span>
                                <span class="circle"></span>
                            </p>
                        </div>
                    </div>
                    <div class="u-item active">
                        <div class="avatar">
                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                            <div class="unread">12</div>
                        </div>
                        <div class="info">
                            <p>
                                <span class="nickname ellipsis">张三张三张三张三张三张三张三张三张三张三</span>
                                <span class="time">10:45</span>
                            </p>
                            <p class="ellipsis">
                                <span>输了你赢了世界又如何输了你赢了世界又如何</span>
                                <span class="circle hide"></span>
                            </p>
                        </div>
                    </div>
                </div>
                <!-- 好友列表 -->
                <div class="w-group" id="contactGroup">
                    <div class="group-item">
                        <a href="javascript:;" class="group-name" onclick="toggleShow('friendsGroup',this)">
                            <i class="icon-jslt-15 arrow-right" id="arrow-right"></i>
                            <i class="icon-jslt-18 arrow-bottom" id="arrow-bottom"></i>
                            <span>我的好友</span>
                        </a>
                        <div class="group-member" id="friendsGroup">
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="group-item">
                        <a href="javascript:;" class="group-name" onclick="toggleShow('deviceGroup',this)">
                            <i class="icon-jslt-15 arrow-right" id="arrow-right"></i>
                            <i class="icon-jslt-18 arrow-bottom" id="arrow-bottom"></i>
                            <span>我的设备</span>
                        </a>
                        <div class="group-member" id="deviceGroup">
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="group-item">
                        <a href="javascript:;" class="group-name" onclick="toggleShow('lockGroup',this)">
                            <i class="icon-jslt-15 arrow-right" id="arrow-right"></i>
                            <i class="icon-jslt-18 arrow-bottom" id="arrow-bottom"></i>
                            <span>黑名单</span>
                        </a>
                        <div class="group-member" id="lockGroup">
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中间聊天内容框 -->
            <div class="m-iframe">
                <div class="g-chat-wrap">
                    <!-- 昵称和功能按钮 -->
                    <div class="m-chat-header">
                        <span class="chat-nickname">张三</span>
                        <div class="fun-area">
                            <div class="i-box min" title="最小化">
                                <i class="icon-jslt-05"></i>
                            </div>
                            <div class="i-box max" title="最大化">
                                <i class="icon-jslt-17"></i>
                            </div>
                            <div class="i-box close" title="关闭">
                                <i class="icon-jslt-02"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 消息主体 -->
                    <div class="m-chat-body">
                        <div class="scroll_wrap">
                            <div class="scroll_cont">
                                <div class="view-more">
                                    <i class="icon-jslt-11"></i>
                                    <span>查看更多消息</span>
                                </div>
                                <div class="chat-list">
                                    <div class="chat-item clearfix">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont">
                                            <div class="cont">
                                                Hi，老同学最近在干啥呢?
                                                <!-- <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt=""> -->
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                    <div class="chat-item clearfix self">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont">
                                            <div class="cont">
                                                Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?
                                                <!-- <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt=""> -->
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                    <div class="chat-item clearfix">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont">
                                            <div class="cont">
                                                Hi，老同学最近在干啥呢?
                                                <!-- <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt=""> -->
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                    <div class="chat-item clearfix">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont">
                                            <div class="cont">
                                                Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?
                                                <!-- <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt=""> -->
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                    <div class="chat-item clearfix self">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont">
                                            <div class="cont">
                                                Hi，老同学最近在干啥呢?
                                                <!-- <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt=""> -->
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                    <div class="chat-item clearfix">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont">
                                            <div class="cont">
                                                Hi，老同学最近在干啥呢?
                                                <!-- <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt=""> -->
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                    <div class="chat-item clearfix self">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont has-img">
                                            <div class="cont">
                                                <!-- Hi，老同学最近在干啥呢? -->
                                                <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                    <div class="chat-item clearfix">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont">
                                            <div class="cont">
                                                Hi，老同学最近在干啥呢?
                                                <!-- <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt=""> -->
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                    <div class="chat-item clearfix self">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont">
                                            <div class="cont">
                                                Hi，老同学最近在干啥呢?
                                                <!-- <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt=""> -->
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                    <div class="chat-item clearfix">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont has-img">
                                            <div class="cont">
                                                <!-- Hi，老同学最近在干啥呢? -->
                                                <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                    <div class="chat-item clearfix self">
                                        <div class="avatar">
                                            <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                        </div>
                                        <div class="chat-cont">
                                            <div class="cont">
                                                Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?
                                                <!-- <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt=""> -->
                                            </div>
                                            <div class="triangle"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="scroll_bar">
                                <div class="scroll_slider"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 聊天输入区 -->
                    <div class="m-chat-footer">
                        <!-- 历史记录 -->
                        <i class="icon-jslt-11 record" title="聊天记录" onclick="handleClickViewRecord()"></i>

                        <!-- 输入框 -->
                        <div class="ipt-area" id="ipt-area">

                        </div>
                        <!-- 发送区 -->
                        <div class="send-area">
                            <div class="send-box">
                                <span class="send-btn" onclick="handleClickSend()">发 送</span>
                                <i class="icon-jslt-18" onclick="handleChooseModel()"></i>

                                <div class="choose-model" id="choose-model">
                                    <p class="active">
                                        <i class="icon-jslt-04"></i>
                                        <span>按Enter键发送消息</span>
                                    </p>
                                    <p>
                                        <i class="icon-jslt-04"></i>
                                        <span>按Ctrl+Enter键发送消息</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 粘贴发送图片弹出框 -->
                    <div class="m-confirm-img">
                        <div class="m-confirm-img-header">
                            <div class="fun-area">
                                <div class="i-box close active" title="关闭">
                                    <i class="icon-jslt-02"></i>
                                </div>
                            </div>
                        </div>
                        <div class="m-confirm-main">
                            <p class="title">发送图片</p>
                            <div class="img-area">
                                <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                            </div>
                            <div class="btn-box">
                                <div>取 消</div>
                                <div class="send">发 送</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧快捷回复 -->
            <div class="m-quick">
                <div class="m-quick-header">
                    <div class="header-btns">
                        <a href="javascript:;" class="active" onclick="showQuickReply(this)">快捷回复</a>
                        <a href="javascript:;" onclick="showUserDetails(this)">用户详情</a>
                    </div>
                </div>
                <!-- 快捷回复 -->
                <div class="m-quick-body" id="quick-reply">
                    <a href="javascript:;" class="add-new">+ 增加快捷回复</a>
                    <div class="quick-body-search">
                        <input type="text" placeholder="输入关键词搜索" />
                        <a href="javascript:;" class="search-btn">搜索</a>
                    </div>
                    <div class="quick-body-choose">
                        <a href="javascript:;" class="active" onclick="showPersonalQuick(this)">个人快捷回复</a>
                        <a href="javascript:;" onclick="showPublicQuick(this)">公共快捷回复</a>
                    </div>
                    <!-- 个人快捷回复 -->
                    <div class="quick-body-area" id="personal-quick">
                        <div class="quick-item">
                            个人快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                    </div>

                    <!-- 公共快捷回复 -->
                    <div class="quick-body-area public-quick" id="public-quick">
                        <div class="quick-item">
                            公共快捷回复
                        </div>
                        <div class="quick-item">
                            这是我的第二条快捷回复这是我的第二条快捷回复这是我的第二条快捷回复
                        </div>
                    </div>
                </div>
                <!-- 用户详情 -->
                <div class="m-quick-body user-detail" id="user-detail">
                    <!-- 基础信息 -->
                    <div class="base-info">
                        <p class="ellipsis">张三</p>
                        <div class="account-info">
                            <div class="accout-type">
                                <p class="ellipsis">微信号：wx_id35465412033</p>
                                <p class="ellipsis">属账号：张三</p>
                            </div>
                            <div class="avatar-box">
                                <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                            </div>
                        </div>
                        <p class="ellipsis">备注：输了你赢了世界又如何输了你赢了世界又如何</p>
                        <p class="ellipsis">地区：四川 成都</p>
                        <div class="from">
                            <p class="ellipsis">来源：通过扫一扫添加</p>
                            <a href="javascript:;">刷新</a>
                        </div>
                    </div>
                    <!-- 订单总览 -->
                    <div class="sub-total">
                        <p class="ellipsis">总订单：100笔</p>
                        <p class="ellipsis">待结算订单数：1笔</p>
                        <p class="ellipsis">待结算积分：100.00元</p>
                        <p class="ellipsis">剩余积分：11548187.00元</p>
                        <p class="ellipsis">兑换中积分：1002.00元</p>
                        <p class="ellipsis">已兑换积分：230455.00元</p>
                        <p class="ellipsis">推荐人数：3242人</p>
                        <p class="ellipsis">提成积分：4775214.00元</p>
                    </div>
                    <!-- 订单详情 -->
                    <div class="order-detail">
                        <p class="ellipsis">订单号：2315841213512345</p>
                        <p class="ellipsis">潞娜定制维多利亚复古裙女2018秋冬新款名媛小香风宫廷丝绒连衣裙</p>
                        <p class="ellipsis">分佣佣金：1230.00元</p>
                        <p class="ellipsis">订单状态：已结算</p>
                        <p class="ellipsis">平台：淘宝</p>
                        <p class="ellipsis">分佣等级：3级</p>
                        <p class="ellipsis">2019-1-11 14:12:13 更新订单</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../plugs/kindeditor/plug/modal/modal.min.js"></script>
    <script src="../plugs/kindeditor/plug/qiniu/qiniu.min.js"></script>
    <script src="../plugs/kindeditor/plug/qiniu/crypto-js.js"></script>
    <script src="../plugs/kindeditor/plug/qiniu/qiniu.upload.token.js"></script>
    <script src="../plugs/kindeditor/plug/qiniu/qiniu.upload.formdata.js"></script>
    <script src="../plugs/kindeditor/lib/tool.min.js"></script>
    <script src="../plugs/kindeditor/lib/interactive.min.js"></script>
    <script src="../plugs/kindeditor/lib/all.js"></script>
    <script src="../plugs/kindeditor/kindeditor-all.js"></script>
    <script src="../plugs/kindeditor/lang/zh-CN.js"></script>
    <script src="../plugs/kindeditor/editor/script.js"></script>
    <script src="../lib/jquery-3.2.1.js"></script>
    <script src="../lib/scrollBar.js"></script>
    <script src="../js/index.js"></script>
    <script>
        //初始化富文本框
        var editor = new ChatBox('ipt-area');
        editor.init({
            qiniu_accp: 'test/chat/',
            edtConfig: {
                // width: '700px',
                // height: '300px'
            }
        })

        //自定义滚动条--左侧联系人列表区
        new CusScrollBar({
            contentSelector: '#dropView', //滚动内容区
            barSelector: '#scoll_contact_bar', //滚动条
            sliderSelector: '#scoll_contact_slider' //滚动滑块
        });
        //自定义滚动条--右侧聊天记录区
        new CusScrollBar({
            contentSelector: '.scroll_cont', //滚动内容区
            barSelector: '.scroll_bar', //滚动条
            sliderSelector: '.scroll_slider' //滚动滑块
        });
    </script>
</body>

</html>